<template>
    <Modal v-model="show"  :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="1500">
        <div>
            <el-alert style="margin-bottom: 10px" type="error">建议初始化库存为0，通过出入库来操作库存</el-alert>
            选择店铺：
            <el-select size="small" filterable v-model="asyncParams.shopId" placeholder="选择店铺" style="width: 160px">
                <template v-for="shop in shops">
                    <el-option :value="shop.id" :label="shop.shopName" :key="shop.id">
                    </el-option>
                </template>
            </el-select>
            <el-input size="small" v-model="asyncParams.itemId" placeholder="商品ID" style="width: 160px;margin-right: 10px;margin-left: 10px" />
            <el-button size="small" type="primary" @click="asyncOrder" :loading="asyncLoading">同步商品</el-button>
        </div>
        <div style="margin-top: 10px">
            sku编码前缀:<el-input size="small" v-model="prefix" placeholder="前缀" style="width: 160px;margin-right: 10px;margin-left: 10px"></el-input>
            长宽高:<el-input size="small" type="number" v-model="length" placeholder="长" style="width: 120px;margin-right: 10px;margin-left: 10px"></el-input>
            <el-input size="small" type="number" v-model="width" placeholder="宽" style="width: 120px;margin-right: 10px;margin-left: 10px"></el-input>
            <el-input size="small" type="number" v-model="height" placeholder="高" style="width: 120px;margin-right: 10px;margin-left: 10px"></el-input>
            <el-input size="small" type="number" v-model="weight" placeholder="重量" style="width: 120px;margin-right: 10px;margin-left: 10px"></el-input>
            <el-input size="small" type="number" v-model="cost" placeholder="成本" style="width: 120px;margin-right: 10px;margin-left: 10px"></el-input>
            <el-input size="small" type="text" v-model="name" placeholder="标题" style="width: 120px;margin-right: 10px;margin-left: 10px"></el-input>
            <el-button size="small" type="primary" @click="batchTian">批量应用</el-button>
            <font> 前缀默认添加"-"</font>
        </div>
        <div class="ivu-table ivu-table-border" style="margin-top: 10px">
            <table style="width: 100%">
                <thead>
                    <tr>
                        <th class="ivu-table-column-center">图片</th>
                        <th class="ivu-table-column-center">商品名称</th>
                        <th class="ivu-table-column-center">规格/属性</th>
                        <th class="ivu-table-column-center">skuCode</th>
                        <th class="ivu-table-column-center">长cm</th>
                        <th class="ivu-table-column-center">宽cm</th>
                        <th class="ivu-table-column-center">高cm</th>
                        <th class="ivu-table-column-center">重量kg</th>
                        <th class="ivu-table-column-center">成本</th>
                        <th class="ivu-table-column-center">库存</th>
                        <th class="ivu-table-column-center">预警库存</th>
                        <th class="ivu-table-column-center">操作</th>
                    </tr>
                </thead>
                <tr v-for="(skus,ind) in productSkus" :key="ind">
                    <th class="ivu-table-column-center">
                        <img :src="skus.pic" style="width: 100px;height: 100px">
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="text" v-model="skus.name" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="text" v-model="skus.variationName" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="text" v-model="skus.skuCode" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.length" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.width" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.height" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.weight" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.cost" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.stock" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-input type="number" v-model="skus.warnStock" style="width: 100%"></el-input>
                    </th>
                    <th class="ivu-table-column-center">
                        <el-button size="small" type="success" @click="del(skus,ind)">删除</el-button>
                    </th>
                </tr>
            </table>
        </div>
        <div slot="footer">
            <el-button size="small" @click="cancel" style="float: left;">取消</el-button>
            <el-select size="small" v-model="warehouseId" placeholder="选择仓库" @change="getLocations" style="width: 180px;margin-right: 10px">
                <el-option value="">选择仓库</el-option>
                <el-option v-for="(st,ind) in warehouses" :key="st.id" :value="st.warehouseId" :label="st.warehouseName+'，'+st.linkMan">
                </el-option>
            </el-select>
            <el-button size="small" type="primary" :loading="modalLoading" @click="ok">导入并关闭</el-button>
            <el-button size="small" type="success" :loading="modalLoading2" @click="ok2">导入继续</el-button>
        </div>
    </Modal>
</template>
<script>
export default {
    name: 'StorageProduct',
    data() {
        return {
            show:false,
            prefix: "",
            width: null,
            height: null,
            length: null,
            weight: null,
            name: null,
            cost: null,
            asyncLoading: false,
            modalLoading: false,
            modalLoading2: false,
            asyncParams: {
                itemId: "",
                shopId: "",
            },
            warehouseId: null,
            shelvesId: null,
            shops: [],
            productSkus: [

            ],
            locations: [],
            warehouses: [],
            product: {

            }
        };
    },
    mounted: function() {



    },
    props: [
        
    ],
    methods: {
        batchTian() {
            // if (!this.prefix) {
            //     this.errorMessage("先填写好前缀，如FA-123");
            //     return;
            // }
            for (var i = 0; i < this.productSkus.length; i++) {

                if (this.prefix) {
                    this.productSkus[i]['skuCode'] = this.prefix + "-" + (i + 1);
                }

                if (this.width > 0)
                    this.productSkus[i]['width'] = this.width;
                if (this.height > 0)
                    this.productSkus[i]['height'] = this.height;
                if (this.length > 0)
                    this.productSkus[i]['length'] = this.length;
                if (this.cost > 0)
                    this.productSkus[i]['cost'] = this.cost;
                if (this.weight > 0)
                    this.productSkus[i]['weight'] = this.weight;
                if (this.name) 
                this.productSkus[i]['name'] = this.name;
            }
        },
        getWarehouse: function() {
            var me = this;
            me.$http.post("/merchant/getWarehouses.do", { subdomain: localStorage.subdomain }).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;
                    if (me.warehouses.length == 1) {
                        me.warehouseId = me.warehouses[0].warehouseId;
                    }
                }

            }, response => {

            });
        },
        getLocations: function() {
          
        },

        chWh: function(val) {
            this.getLocations();
        },
        showDialog(){

            this.show=true;
        },
        showModal: function(value) {
            if (value) {
                if (this.shops.length <= 0) {
                    this.getAllshop();
                }
                if (this.warehouses.length <= 0) {
                    this.getWarehouse();
                }

            } else {
                this.productSkus = [];
                this.asyncParams.itemId = "";
                this.loading = false;
                this.modalLoading = false;
                this.modalLoading2 = false;
            }
        },
        getAllshop: function() {

            var me = this;
            me.$http.post("/tiktokshop/getAllShop.do").then(response => {
                var body = response;
                if (body.status == 0) {

                    this.shops = body.obj;
                    if (this.shops.length > 0)
                        this.queryShops = this.shops.slice(0, me.shops.length);
                }

            }, response => {

            });
        },
        del: function(item, ind) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {

                    me.productSkus.splice(ind, 1);
                },
                onCancel: function() {

                }
            });
        },
        asyncOrder: function() {
            if (!this.asyncParams.shopId) {
                this.errorMessage("请先选择店铺");
                return false;
            }
            if (!this.asyncParams.itemId) {
                this.errorMessage("请先填写好商品ID");
                return false;
            }


            this.asyncLoading = true;
            this.$http.post("/tiktokproduct/crawlDetail.do", { shopId: this.asyncParams.shopId, itemId: this.asyncParams.itemId }).then(response => {
                var body = response;
                if (body.status == 0) {


                    this.productSkus = body.obj;
                

                } else {
                    this.errorMessage(body.info);
                }
                this.asyncLoading = false;
            }, () => {
                this.asyncLoading = false;
            });

        },
        ok: function() {
            if (!this.validate()) {
                return;
            }
            this.modalLoading = true;
            var data = JSON.stringify(this.productSkus);
            this.$http.post("/storageproduct/batch.do", { data: data, warehouseId: this.warehouseId, shelvesId: this.shelvesId }).then(response => {
                var body = response;
                if (body.status == 0) {
                    this.show=false;
                    this.$emit("ok");
                } else {
                    this.errorMessage(body.info);
                }
                this.modalLoading = false;
            }, () => {
                this.modalLoading = false;
            });


        },
        validate: function() {
            if (!this.warehouseId) {
                this.errorMessage("请选择仓库");
                return false;
            }
            if (this.productSkus.length <= 0) return false;

            // for (var i=0;i< this.productSkus.length;i++) {

            //     var stock=parseInt(this.productSkus[i]['stock']);
            //     if (stock<= 0) {
            //         this.errorMessage("库存不能小于0")
            //         return false;
            //     }
            // }
            return true;
        },
        ok2: function() {

            var me = this;
            if (!me.validate()) {
                return;
            }
            this.modalLoading2 = true;
            var data = JSON.stringify(this.productSkus);
            this.$http.post("/storageproduct/batch.do", { data: data, warehouseId: this.warehouseId, shelvesId: this.shelvesId }).then(response => {
                var body = response;
                if (body.status == 0) {
                    this.productSkus = [];
                    this.asyncParams.itemId = "";
                } else {
                    this.errorMessage(body.info);
                }
                this.modalLoading2 = false;
            }, () => {
                this.modalLoading2 = false;
            });


        },
        cancel: function() {
            this.show=false;
            this.$emit("cancel");
        }
    }
}
</script>
<style scoped>
</style>